<?php
/*
 * template/popin-new.phtml
 */
?>
<?php

use RHX\Helper\RHDateTime;
?>
<?php
$template	 = $this->template;
$code		 = $this->code;
$entree		 = $this->entree;
$sortie		 = $this->sortie;
$codes		 = $this->codes;
// Variables temporelle
$Entree		 = new RHDateTime();
$Entree->setTime($entree);
$Sortie		 = new RHDateTime();
$Sortie->setTime($sortie);
?>
<div class="popin-arrow">
    <div class="popin-content">
	<div class="popin-title content-head">
	    <h4>Edition du Planning Semaine</h4>
	</div>
	<div class="popin-code">
	    <h5 style='width: 99%'>Codes d'activité</h5>
	    <div class='popin-code-content'>
		<?php foreach ($codes as $c): ?>
		    <?php $selected = ((int) $code == (int) $c->id) ? 'selected' : ''; ?>
    		<div class='code <?php echo $selected; ?>' id="code-<?php echo $c->id; ?>">
    		    <div class='code-couleur' style='background: <?php echo $c->couleur; ?>'>
    			<a href='#' id="<?php echo $c->id; ?>" class="code-link" title='<?php echo $c->libelle; ?>' onclick="return changeCode(<?php echo $c->id; ?>);">
				<?php echo $c->code; ?>
    			</a>
    		    </div>
    		</div>
		<?php endforeach; ?>
	    </div>
	</div>
	<div class='popin-other'>
	    Heure Entrée<br>
	    <select id='entree_heure' name='entree_heure'>
		<?php for ($i = 0; $i < 24; $i++): ?>
		    <?php $value		 = ($i < 10) ? '0' . $i : $i; ?>
		    <?php $selected	 = ((int) $Entree->getH() == (int) $value) ? 'selected="selected"' : ''; ?>
    		<option value='<?php echo $value; ?>' <?php echo $selected; ?>><?php echo $value; ?></option>
		<?php endfor; ?>
	    </select> :
	    <select id='entree_minute' name='entree_minute'>
		<?php for ($i = 0; $i < 60; $i+= 5): ?>
		    <?php $value		 = ($i < 10) ? '0' . $i : $i; ?>
		    <?php $selected	 = ((int) $Entree->getM() == (int) $value) ? 'selected="selected"' : ''; ?>
    		<option value='<?php echo $value; ?>' <?php echo $selected; ?>><?php echo $value; ?></option>
		<?php endfor; ?>
	    </select>
	    <br>
	    Heure Sortie<br>
	    <select id='sortie_heure' name='entree_heure'>
		<?php for ($i = 0; $i < 24; $i++): ?>
		    <?php $value		 = ($i < 10) ? '0' . $i : $i; ?>
		    <?php $selected	 = ((int) $Sortie->getH() == (int) $value) ? 'selected="selected"' : ''; ?>
    		<option value='<?php echo $value; ?>' <?php echo $selected; ?>><?php echo $value; ?></option>
		<?php endfor; ?>
	    </select> :
	    <select id='sortie_minute' name='entree_minute'>
		<?php for ($i = 0; $i < 60; $i+= 5): ?>
		    <?php $value		 = ($i < 10) ? '0' . $i : $i; ?>
		    <?php $selected	 = ((int) $Sortie->getM() == (int) $value) ? 'selected="selected"' : ''; ?>
    		<option value='<?php echo $value; ?>' <?php echo $selected; ?>><?php echo $value; ?></option>
		<?php endfor; ?>
	    </select>
	</div>
	<hr>
	<div class='popin-button' style='margin-bottom: 5px;'>
	    <button class='btn btn-success validate'>Valider</button>
	    <button class='btn btn-inverse' onclick='$(".rhPopover").remove();'>Fermer</button>
	</div>
	<input type="hidden" id="pl-id" name="id" value="<?php echo $this->matricule; ?>" />
	<input type="hidden" id="data-code" name="code" value="<?php echo $code; ?>" />
	<input type="hidden" id="prefix" name="prefix" value="<?php echo $this->prefix; ?>" />
	<input type="hidden" id="pk" name="pk" value="<?php echo $this->pk; ?>" />
    </div>
</div>

<script type="text/javascript">
			    // Chargement
			    $(function() {
				// Validatiion
				$('.validate').click(function(e) {
				    e.preventDefault();
				    id = $('#pl-id').val();
				    code = $('#data-code').val();
				    entree = $('#entree_heure option:selected').val() + ':' + $("#entree_minute option:selected").val();
				    sortie = $('#sortie_heure option:selected').val() + ':' + $("#sortie_minute option:selected").val();
				    prefix = $('#prefix').val();
				    pk = $('#pk').val();
				    // Pas D'AJAX
				    // lundi-18_entree
				    classe = 'color-' + codec[code];
				    //alert('#tpl-' + pk + '-' + prefix);
				    //alert(prefix + '-' + id);
				    $('#tpl-' + pk + '-' + prefix).removeClass().addClass(classe);
				    $('#tpl-' + pk + '-' + prefix + '>a').text(codec[code]);
				    $('#' + prefix + '-' + id).val(code);
				    $('#tpl-' + pk + '-' + prefix + '-entree').removeClass().addClass(classe);
				    $('#tpl-' + pk + '-' + prefix + '-entree a').text(entree);
				    $('#' + prefix + '-' + id + '_entree').val(entree);
				    $('#tpl-' + pk + '-' + prefix + '-sortie').removeClass().addClass(classe);
				    $('#tpl-' + pk + '-' + prefix + '-sortie a').text(sortie);
				    $('#' + prefix + '-' + id + '_sortie').val(sortie);
				    $(".rhPopover").remove();
				});
			    });
			    function changeCode(newCode) {
				$('#data-code').val(newCode);
				$('.selected').removeClass('selected');
				$('#code-' + newCode).addClass('selected');
				return false;
			    }
			    var codec = new Array();
<?php foreach ($codes as $c): ?>
    			    codec[<?php echo $c->id; ?>] = "<?php echo $c->code; ?>";
<?php endforeach; ?>
</script>

<style>
    .popin-arrow, .popin-content{
	width: 99%;
	margin: 0 auto;
    }
    .popin-title{
	margin: auto;
	width: 90%;
    }
    .popin-content{
	background: #fcf9f9;
	border-radius: 0px 15px 15px;
	padding-bottom: 5px;
	border: solid 1px #cccccc;
	box-shadow: 0 0 5px 0px #666666;
	padding: 5px;
    }
    .popin-code, .popin-other{
	display: inline-table;
    }
    .popin-code{
	width: 68%;
    }
    .popin-other{
	width: 28%;
	border-radius: 5px;
	border: solid 1px #dbf5ff;
	margin-right: 1%;
	margin-top: 2%;
    }
    .popin-other select{
	width: 40%;
    }
    .code{
	display: inline-block;
	width: 48px;
	border: solid 1px #9fbbc6;
	padding: 3px;
	margin: 3px;
    }
    .code:hover{
	box-shadow: 0 0 5px 0px #888888;
    }
    .selected{
	box-shadow: 0 0 5px 0px #888888;
	border: solid 2px #666666;
    }
    .code-couleur{
	width: 95%;
	height: 95%;
	margin: auto;
    }
    .code-couleur a{
	display: block;
	width: 100%;
	height: 100%;
    }
    .code-description{
	font-size: 0.8em;
    }
    .code-couleur, .code-description{
	display: inline-block;
    }
</style>
